
/* Global Variables */

const btn_html_timer =
    `<style onload="tid=setInterval(timer, 1000)"></style>
     <button onclick="clearInterval(tid)" class="jspsych-btn" disabled=true>%choice%</button>`

const feedback_right = `<span style="position: absolute; top: 55%; left: 0; right: 0; color: green"> √ </span>`

const feedback_wrong = `<span style="position: absolute; top: 55%; left: 0; right: 0; color: red"> X </span>`

const subID = jsPsych.randomization.randomID(8)


/* Blocks: HTML DOM Settings */

var set_html_style = {
    type: 'call-function',
    func: function() {
        document.body.style.backgroundColor = 'rgb(250, 250, 250)' // background color
        document.body.style.color = 'black' // font color
        document.body.style.fontSize = '20pt'
        document.body.style.fontFamily = '微软雅黑'
        document.body.style.fontWeight = 'bold' // 'normal', 'bold'
        document.body.style.lineHeight = '1.6em' // line space
        document.body.style.cursor = 'default' // 'default', 'none', 'wait', ...
        document.body.onselectstart = function() { return false } // 禁止选中文字 <body oncontextmenu="return false">
        document.body.oncontextmenu = function() { return false } // 禁用鼠标右键 <body onselectstart="return false">
        document.onkeydown = function() {
            // 屏蔽键盘按键 (https://www.bejson.com/othertools/keycodes/)
            if ((event.keyCode in { 27: 'Esc', 116: 'F5', 123: 'F12' }) ||
                (event.ctrlKey && event.keyCode in { 85: 'U' })
            ) { return false }
        }
    },
}

var set_html_style_EAST = {
    type: 'call-function',
    func: function() {
        document.body.style.backgroundColor = 'black'
        document.body.style.color = 'white'
        document.body.style.fontSize = '32pt'
        document.body.style.fontFamily = '微软雅黑'
        document.body.style.fontWeight = 'normal'
        document.body.style.lineHeight = '1.2em'
        document.body.style.cursor = 'none'
    },
}


/* Blocks: Basics */

var open_fullscreen = {
    type: 'fullscreen',
    fullscreen_mode: true,
    message: `
    <p style="font: 16pt 微软雅黑; text-align: left; line-height: 1.6em">
    <b>
    测验将在一个「全屏页面」开始，为确保最佳效果，请你：<br/>
    （1）在电脑上进行测验，并使用主流浏览器打开本网页<br/>
    &emsp;&emsp;（Chrome、Edge、Firefox、Safari等，不要用IE）<br/>
    （2）关掉电脑上其他正在运行的程序或将其最小化<br/>
    （3）将手机调至静音，并尽可能减少环境噪音干扰<br/>
    （4）在测验过程中不要退出全屏<br/>
    （5）务必认真作答<br/><br/>
    </b>
    如果你同意参与，并且清楚理解了上述要求，请点击开始：
    </p>`,
    button_label: '点击这里全屏开始',
    delay_after: 100
}

var welcome = {
    type: 'html-keyboard-response',
    stimulus: `
    <p style="font: bold 32pt 微软雅黑; color: #B22222">
    欢迎参与我们的实验</p>
    <p style="font: 20pt 微软雅黑; color: black"><br/>
    <按空格键继续><br/>
    <b>实验过程中请勿退出全屏</b><br/><br/></p>
    <p style="font: 20pt 华文中宋; color: grey">
    天津师范大学<br/>2021年</p>`,
    choices: [' '],
    post_trial_gap: 100
}

var warmup = {
    type: 'html-button-response',
    stimulus: '<p>请做好准备……</p>',
    choices: ['<span id="timer">5</span>秒后继续'],
    button_html: btn_html_timer
}


/* Blocks: Surveys */

var Sex = {
    type: 'html-button-response',
    data: { varname: 'Sex' },
    stimulus: '你的性别',
    choices: ['男', '女', '其他'],
}

var Age = {
    type: 'survey-html-form',
    data: { varname: 'Age' },
    preamble: '你的年龄',
    html: `
    <p><input name="Q0" type="number" placeholder="15~99" min=15 max=99
    oninput="if(value.length>2) value=value.slice(0,2)" required /></p>`,
    button_label: '继续',
}


var Degree = {
    type: 'survey-html-form',
    data: { varname: 'Degree' },
    preamble: '你的学历等级',
    html: `
    <p><select name="Q0" size=10>
    <option>博士</option>
    <option>硕士</option>
    <option>本科</option>
    <option>高中</option>
    <option>初中</option>
    <option>小学</option>
    </select></p>`,
    button_label: '继续',
}


var description = {
    type: 'html-keyboard-response',
    stimulus: `
    <p style="font: bold 40pt 微软雅黑; color: black">
    我们即将学习30对词对，屏幕上将呈现一个“+”子形的注视点随后将呈现一个词对，比如“苹果-台灯”。
    其中左边的词（“苹果”）为<span style="color: #B22222">线索词</span>，
    右边的词（“台灯”）为<span style="color: #B22222">目标词</span>。
词对的呈现时间为3秒，你需要在3秒内尽可能最大努力记住该词对</p>
    <p style="font: 100pt 华文中宋; color: B22222">
    苹果-台灯</p>
    <p style="font: 20pt 微软雅黑; color: black"><br/>
    <按空格键继续><br/>`,
    choices: [' '],
    post_trial_gap: 100
}



var procedure = {
    timeline: [
        {
            type: 'html-keyboard-response',
            stimulus: '+',
            choices: jsPsych.NO_KEYS,
            trial_duration: 500
        },
        {
            type: 'html-keyboard-response',
            stimulus: function(){
                var html="<p style='font: 120pt 华文中宋; color: B22222'>"+jsPsych.timelineVariable('name')+"</p>";
                return html;
            },          
            choices: jsPsych.NO_KEYS,
            trial_duration: 2500
        },
        {
            type: 'html-slider-response',
            stimulus: '<p style="font: bold 40pt 微软雅黑; color: black">请你预测，在10分钟后的记忆测验中，若只呈现线索词，你能回忆出与之对应的目标词的百分比，请点击对应的数字上方选择完后请点击下方的小按钮进行确认。</p>',
            labels: ['1', '2', '3', '4', '5', '6', '7', '8', '9'],
            min: 1,
            max: 9,
            start: 5,
            prompt: '<b id="slider-value">_</b><br/><br/>',
            button_label: '继续',
            require_movement: true

        }
    ],
    timeline_variables: [
        { name: '苹果-台灯' },
        { name: '嘴巴-图案' },
        { name: '马车-车夫' },
        { name: '游戏-娱乐' }
    ],
    randomize_order: true
}

var test = {
    timeline: [
        {
           type: 'html-keyboard-response',
            stimulus: function(){
                var html="<p style='font: 120pt 华文中宋; color: B22222'>"+jsPsych.timelineVariable('name')+"</p>";
                return html;
            }, 
            choices: [' '],
            trial_duration: 5000
        }, 
        // {
        //     type: 'survey-html-form',
        //     data: { varname: 'Age' },
        //     preamble: function(){
        //                 var html="<p style='font: 120pt 华文中宋; color: B22222'>"+jsPsych.timelineVariable('name')+"</p>";
        //                 return html;
        //             },          
        //     html: `
        //     <p>输入拼音<input name="Q0"/></p> <p>输入匹配词对<input name="Q0"/></p>`,
        //     button_label: '继续',
        // },
        // {
        //     type: 'html-button-response',
        //     data: { varname: 'Sex' },
        //     stimulus: function(){
        //         var html="<p style='font: 120pt 华文中宋; color: B22222'>"+jsPsych.timelineVariable('name')+"</p>";
        //         return html;
        //     }, 
        //     html: `
        //      <p><input name="Q0"/></p>`,
        //     choices: ['下一题', '确定', '回忆'],
        //     trial_duration: 3000,
        //     // on_finish: function(data) { addRespFromSurvey(data) }
        // }

    ],
    timeline_variables: [
        { name: '苹果' ,key:'台灯' },
        { name: '嘴巴' ,key:'图案' },
        { name: '马车' ,key:'车夫' },
        { name: '游戏' ,key:'娱乐' }
    ],
    randomize_order: true
}


var close_fullscreen = {
    type: 'fullscreen',
    fullscreen_mode: false,
    delay_after: 0
}


/* Combine Timelines */

var surveys = {
    timeline: [
        Sex,
        Age,
        Degree
    ]
}


var main_timeline = [
    // set_html_style,
    // open_fullscreen,
    // warmup,
    // surveys,
    // description,
    // procedure,
    test
  
]



/* Launch jsPsych */

jsPsych.init({
    timeline: main_timeline,
    // experiment_structure: exp,
    on_finish: function() {
        jsPsych.data.get().localSave('json', `data_exp_demo.json`) // download from browser
        document.getElementById('jspsych-content').innerHTML += '实验结束，感谢您的参与！'
    }
})
